<div class="panel panel-default panel-widget">
    <div class="panel-body" style="background-color: #fff;padding: 10px ">
        <h4 class="header-dividing" id="minimum-setup">基本类型</h4>
        <div class="row">
            <div class='col-sm-6'>
                <select  rel="chosen" data-placeholder="选择一个宠物..." class="chosen-select form-control" tabindex="2">
                  <option value=""></option>
                  <option value="cat">小猫</option>
                  <option value="dog">小狗</option>
                  <option value="fish">金鱼</option>
                  <option value="dragon">龙</option>
                </select>
            </div>
        </div>
        <br/>
        <h4 class="header-dividing" id="minimum-setup">多项选择</h4>
        <div class="row">
            <div class='col-sm-6'>
                <select rel="chosen"  data-width="100%" data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple>
                    <option value="strawberries">草莓</option>
                    <option value="apple">苹果</option>
                    <option value="orange">橙子</option>
                    <option value="cherry">樱桃</option>
                    <option value="banana">香蕉</option>
                    <option value="figs">无花果</option>
                </select>
            </div>
        </div>
        <br/>
        <h4 class="header-dividing" id="minimum-setup">分组下拉列表</h4>
        <div class="row">
            <div class='col-sm-6'>
                <select rel="remoteChosen" data-placeholder="选择您喜欢球队..." class="chosen-select form-control" tabindex="5">
                    <option value=""></option>
                    <optgroup label="NFC EAST">
                        <option>Dallas Cowboys</option>
                        <option>New York Giants</option>
                        <option>Philadelphia Eagles</option>
                        <option>Washington Redskins</option>
                    </optgroup>
                    <optgroup label="NFC NORTH">
                        <option>Chicago Bears</option>
                        <option>Detroit Lions</option>
                        <option>Green Bay Packers</option>
                        <option>Minnesota Vikings</option>
                    </optgroup>
                </select>
            </div>
        </div>
        <br/>
        <h4 class="header-dividing" id="minimum-setup">Ajax远程加载数据</h4>
        <div class="row">
            <div class='col-sm-6'>
            <select rel="remoteChosen" data-server="true" data-url="/assets/ajax/data/chosen.json" data-placeholder="选择喜欢城市..." class="chosen-select form-control" >
                <option value=""></option>
            </select>
            </div>
        </div>

        <br/>
        <div class="mu-tabbable border-remove">
            <ul class="nav nav-tabs ">
                <li class="active"><a href="#tab_5_1" data-toggle="tab">Javascript</a>
                </li>
                <li><a href="#tab_5_2" data-toggle="tab">Html</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_5_1">
                无
                </div>
                <div class="tab-pane" id="tab_5_2">
                <pre class="prettyprint">
&lt;select  rel="chosen" data-placeholder="选择一个宠物..." class="chosen-select form-control" tabindex="2"&gt;
  &lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="cat"&gt;小猫&lt;/option&gt;
  &lt;option value="dog"&gt;小狗&lt;/option&gt;
  &lt;option value="fish"&gt;金鱼&lt;/option&gt;
  &lt;option value="dragon"&gt;龙&lt;/option&gt;
&lt;/select&gt;
&lt;select rel="chosen"  data-width="100%" data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple&gt;
    &lt;option value="strawberries"&gt;草莓&lt;/option&gt;
    &lt;option value="apple"&gt;苹果&lt;/option&gt;
    &lt;option value="orange"&gt;橙子&lt;/option&gt;
    &lt;option value="cherry"&gt;樱桃&lt;/option&gt;
    &lt;option value="banana"&gt;香蕉&lt;/option&gt;
    &lt;option value="figs"&gt;无花果&lt;/option&gt;
&lt;/select&gt;
&lt;select rel="remoteChosen" data-placeholder="选择您喜欢球队..." class="chosen-select form-control" tabindex="5"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    &lt;optgroup label="NFC EAST"&gt;
        &lt;option&gt;Dallas Cowboys&lt;/option&gt;
        &lt;option&gt;New York Giants&lt;/option&gt;
        &lt;option&gt;Philadelphia Eagles&lt;/option&gt;
        &lt;option&gt;Washington Redskins&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="NFC NORTH"&gt;
        &lt;option&gt;Chicago Bears&lt;/option&gt;
        &lt;option&gt;Detroit Lions&lt;/option&gt;
        &lt;option&gt;Green Bay Packers&lt;/option&gt;
        &lt;option&gt;Minnesota Vikings&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
&lt;select rel="remoteChosen" data-server="true" data-url="/assets/ajax/data/chosen.json" data-placeholder="选择喜欢城市..." class="chosen-select form-control" &gt;
    &lt;option value=""&gt;&lt;/option&gt;
&lt;/select&gt;
                </pre>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
window.prettyPrint();
</script>
